<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            height: 100%;
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">

    <el-header style="background-color: #0095d7;text-align: center">
        <h1 style="color: white;font-size: 22px">
            疫情工作管理页面

        </h1>
    </el-header>

    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside  width="300px"  style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']"
                     unique-opened="true"
                     @select="handleSelect"
            >
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-setting" ></i>疫情动态管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" >疫情动态列表</el-menu-item>
                        <el-menu-item index="1-2" >发布疫情动态</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-setting"></i>领导信息管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">领导信息列表</el-menu-item>
                        <el-menu-item index="2-2">添加领导信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>疫情事件上报管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1">疫情事件审核</el-menu-item>
                        <el-menu-item index="3-2">疫情事件上报</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-setting"></i>疫情防控调查问卷</template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1">调查问卷列表</el-menu-item>
                        <el-menu-item index="4-2">发布调查问卷</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>


            <el-main>

                <el-table :data="dynamics"

                          v-if="currentIndex=='1-1'">

                    <el-table-column prop="title" label="标题" width="140">
                    </el-table-column>
                    <el-table-column prop="poster" label="发布者" width="120">
                    </el-table-column>
                    <el-table-column prop="type" label="文章类别">
                    </el-table-column>
                    <el-table-column prop="postDate" label="发布日期">
                    </el-table-column>
                    <el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button  size="mini" @click="showContent(scope.row)"
                                        type="success">查看正文</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="leader"
                          v-if="currentIndex=='2-1'">
                    <el-table-column prop="name" label="领导姓名" width="140"></el-table-column>
                    <el-table-column prop="gender" label="性别" width="140"></el-table-column>
                    <el-table-column prop="organization" label="组织名称" width="140"></el-table-column>
                    <el-table-column prop="job" label="职务" width="140"></el-table-column>
                    <el-table-column prop="contactNumber" label="联系电话" width="140"></el-table-column>
                    <el-table-column prop="location" label="辖区" width="140"></el-table-column>
                    <el-table-column prop="remarks" label="备注" width="140"></el-table-column>
                    <el-table-column prop="photo" label="照片" width="140"></el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button  size="mini" @click="leaderUpdate(scope.row)"
                                        type="success">修改</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                    </el-table-column>
                </el-table>

                <el-table
                        v-if="currentIndex=='3-1'"
                        :data="eventData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="事件名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="location"
                            label="地区"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="事件类别"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="postDate"
                            label="日期"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="status"
                            label="事件状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button  size="mini" @click="eventUpdate(scope.row)"
                                        type="success">修改</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-table
                        v-if="currentIndex=='4-1'"
                        :data="questionnaire"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="问卷名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="surveyTime"
                            label="调查时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="surveyNum"
                            label="参与次数"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="问卷状态">
                    </el-table-column>

                    <el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button  size="mini" @click="detailQuestionnaire(scope.row)"
                                        type="success">查看问卷</el-button>
                            <el-button  size="mini" @click="resultAnalysis(scope.row)"
                                        type="success">结果分析</el-button>
                            <el-button  size="mini" @click="deleteQuestionnaire(scope.row)"
                                        type="success">删除问卷</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {

            return {
                currentIndex:"1-1",
                headertext:"",
                questionnaire:[{name:"xxx问卷",surveyTime:"2022-10-21",surveyNum:"999",status:"未完成",url:"www.baidu.com",resultAnalysis:""}],

                eventData:[{
                    name:"4",type:"5",postDate:"23",status:"1",location:"沈河区"
                }],
                leader:[],
                dynamics: []

            }


        },
       methods: {



           handleSelect(key,keyPath){
               if (key=='1-2'){
                   location.href="/postnews.html";
               }else if(key=='2-2'){
                   location.href="/addLeader.html"
               }else if(key=='3-2'){
                   location.href="/eventReport.html"
               }else if (key=='4-2'){
                   location.href="/questionnaire.html"
               }
               else{
                   v.currentIndex = key;
               }
           },
           leaderUpdate(leader){
               location.href="/updateLeader.html?id="+leader.id;

           },
           eventUpdate(event){
               alert("修改事件信息");
           },
           resultAnalysis(result){
               alert("结果分析")
           },
           deleteQuestionnaire(){
               alert("删除问卷")
           },
           detailQuestionnaire(){
               alret("查看问卷")
           },showContent(dynamic){
               location.href="/dynamicContent.html?id="+dynamic.id
           }
       },
       created:function(){
            //获取疫情动态
            axios.get("/evil/dynamic/select").then(function (response) {
                v.dynamics=response.data;
            })
           //获取领导信息
           axios.get("/evil/leader/select").then(function (response) {
               v.leader=response.data;
           })
           //获取疫情事件信息
           axios.get("/evil/event/select").then(function (response) {
               v.eventData=response.data;
           })
           axios.get("/evil/questionnaire/select").then(function (response) {
               v.questionnaire=response.data;
           })
       }


   })
</script>
</html>
